window.onload=function(){
    var indexAll=0;
    // 路径导航动态渲染
    actlist();
    function actlist(){
        var path=goodData.path;
        var act=document.querySelector('#actList');
        for(var i=0;i<path.length;i++){
            if(i==path.length-1){
                var aNode=document.createElement('a');
                aNode.innerHTML=path[i].title;
                act.appendChild(aNode);
            }else{
                var aNode=document.createElement('a');
                aNode.innerHTML=path[i].title;
                aNode.href=path[i].url;
                var iNode=document.createElement('i');
                iNode.innerText='/';
                act.appendChild(aNode);
                act.appendChild(iNode);
        }
    }
    }

    // 放大镜移入移出动态
    samllAndBig();
    function samllAndBig(){
        var smallImg=document.querySelector('#actWarper #actContent #content #smallImg');
        var content=document.querySelector('#actWarper #actContent #content');
        var big_imagessrc=goodData.imagessrc;
        smallImg.onmouseenter=function(event){
            var hoverDiv=document.createElement('div');
            hoverDiv.id='hover';
            smallImg.appendChild(hoverDiv);

            var bigImg=document.createElement('div');
            bigImg.id='bigImg';
            content.appendChild(bigImg);

            var imgNode=document.createElement('img');
            imgNode.src=big_imagessrc[indexAll].b;
            bigImg.appendChild(imgNode);

            smallImg.onmousemove=function(event){
                var left=event.clientX-smallImg.getBoundingClientRect().left-hoverDiv.offsetWidth/2;
                var top=event.clientY-smallImg.getBoundingClientRect().top-hoverDiv.offsetHeight/2;
                
                if(left<0){
                    left=0;
                }else if(left>smallImg.clientWidth-hoverDiv.offsetWidth){
                    left=smallImg.clientWidth-hoverDiv.offsetWidth;
                }
                if(top<0){
                    top=0;
                }else if(top>smallImg.clientHeight-hoverDiv.offsetHeight){
                    top=smallImg.clientHeight-hoverDiv.offsetHeight;
                }

                hoverDiv.style.left=left+'px';
                hoverDiv.style.top=top+'px';

                var socal=(smallImg.clientWidth-hoverDiv.offsetWidth)/(imgNode.offsetWidth-bigImg.clientWidth);
                imgNode.style.left=-left/socal+'px';
                imgNode.style.top=-top/socal+'px';
            }
            
            smallImg.onmouseleave=function(){
                smallImg.removeChild(hoverDiv);
                content.removeChild(bigImg);
            }
        }
    }

    // 缩略图列表动态渲染
    imgNavAct();
    function imgNavAct(){
        var ulNode=document.querySelector('#actWarper #actContent #content .leftBottom .imglistWarper ul ');
        var imagessrc=goodData.imagessrc;
        for(var i=0;i<imagessrc.length;i++){
            var liNode=document.createElement('li');
            
            var imgNode=document.createElement('img');
            imgNode.src=imagessrc[i].s;
            liNode.appendChild(imgNode);
            
            ulNode.appendChild(liNode);
        }
    }

    // 点击缩略图切换大小图
    imgClick();
    function imgClick(){
        var liNodes=document.querySelectorAll('#actWarper #actContent #content .leftBottom .imglistWarper ul li');
        var imgNode=document.querySelector('#actWarper #actContent #content #smallImg img');
        var imagessrc=goodData.imagessrc;
        for(var i=0;i<liNodes.length;i++){
            liNodes[i].index=i;
            liNodes[i].onclick=function(){
                var index=this.index;
                imgNode.src=imagessrc[index].s;
                indexAll=index;
            }
        }
    }

    // 点击左右a标签切换图片
    prevNext();
    function prevNext(){
        var ulNode=document.querySelector('#actWarper #actContent #content .leftBottom .imglistWarper ul');
        var imgWidth=document.querySelectorAll('#actWarper #actContent #content .leftBottom .imglistWarper ul li');
        var prev=document.querySelector('#actWarper #actContent #content .leftBottom a.prev');
        var next=document.querySelector('#actWarper #actContent #content .leftBottom a.next');
        var left=ulNode.offsetLeft;  //获取当前的left值；
        var move=(imgWidth[0].offsetWidth+20)*2; //每次移动的值
        var maxLeft=(imgWidth.length-5)*(imgWidth[0].offsetWidth+20);  //最大left值
        next.onclick=function(){
            left+=move;
            if(left>maxLeft){
                left=maxLeft;
            }
            ulNode.style.left=-left+'px';
        }
        prev.onclick=function(){
            left-=move;
            if(left<0){
                left=0;
            }
            ulNode.style.left=-left+'px';

        }
    }

    //
}